<script lang="ts" setup>
import {onMounted, reactive, type UnwrapRef} from 'vue';
import {useRoute} from "vue-router";
import dayjs from "dayjs";
import {getInterviewByIdAPI} from "@/apis/interview.ts";

//表单数据
interface FormState {
  interviewId: string
  interviewStatus: string
  interviewType: string
  interviewLink: string
  interviewStartTime: string
  interviewEndTime: string
  interviewRemarks: string

  jobTitle: string
  jobDescription: string
  jobRequirements: string
  jobLocation: string
  jobType: string
  jobSalary: string
  jobSalaryType: string
  jobWorkingHours: string
  jobStartDate: string
  jobEndDate: string

  userAvatarUrl: string
  employerIsVerified: string
  employerCompanyName: string
  employerCompanyIndustry: string
  employerCompanyAddress: string
  employerCompanyDescription: string
  employerCompanyWebsite: string
}

const formState: UnwrapRef<FormState> = reactive({
  interviewId: '',
  interviewStatus: '',
  interviewType: '',
  interviewLink: '',
  interviewStartTime: '',
  interviewEndTime: '',
  interviewRemarks: '',

  jobTitle: '',
  jobDescription: '',
  jobRequirements: '',
  jobLocation: '',
  jobType: '',
  jobSalary: '',
  jobSalaryType: '',
  jobWorkingHours: '',
  jobStartDate: '',
  jobEndDate: '',

  userAvatarUrl: '',
  employerIsVerified: '',
  employerCompanyName: '',
  employerCompanyIndustry: '',
  employerCompanyAddress: '',
  employerCompanyDescription: '',
  employerCompanyWebsite: '',
});


//接收参数
const route = useRoute();
//生命周期
onMounted(() => {
  formState.interviewId = route.params.interviewId as string;
  getInterviewNewDetail()
})
//获取岗位信息
const getInterviewNewDetail = async () => {
  getInterviewByIdAPI(
      {
        interviewId: formState.interviewId,
        checkType: 'jobseeker'
      }
  ).then((res) => {
    if (res.data.flag) {
      formState.interviewId = res.data.data.interviewId;
      formState.interviewStatus = res.data.data.interviewStatus;
      formState.interviewType = res.data.data.interviewType;
      formState.interviewLink = res.data.data.interviewLink;
      formState.interviewStartTime = dayjs(res.data.data.interviewStartTime).format('YYYY-MM-DD-HH:mm:ss');
      formState.interviewEndTime = dayjs(res.data.data.interviewEndTime).format('YYYY-MM-DD-HH:mm:ss');
      formState.interviewRemarks = res.data.data.interviewRemarks;

      formState.jobTitle = res.data.data.jobTitle
      formState.jobType = res.data.data.jobType
      formState.jobSalary = res.data.data.jobSalary
      formState.jobSalaryType = res.data.data.jobSalaryType
      formState.jobWorkingHours = res.data.data.jobWorkingHours
      formState.jobDescription = res.data.data.jobDescription
      formState.jobRequirements = res.data.data.jobRequirements
      formState.jobLocation = res.data.data.jobLocation
      formState.jobStartDate = dayjs(res.data.data.jobStartDate).format('YYYY-MM-DD')
      formState.jobEndDate = dayjs(res.data.data.jobEndDate).format('YYYY-MM-DD')

      formState.userAvatarUrl = res.data.data.userAvatarUrl;
      formState.employerCompanyName = res.data.data.employerCompanyName;
      formState.employerIsVerified = res.data.data.employerIsVerified;
      formState.employerCompanyIndustry = res.data.data.employerCompanyIndustry;
      formState.employerCompanyAddress = res.data.data.employerCompanyAddress;
      formState.employerCompanyDescription = res.data.data.employerCompanyDescription;
      formState.employerCompanyWebsite = res.data.data.employerCompanyWebsite;
    }
  })
}
//计算颜色
const Color = (colorType: string) => {
  switch (colorType) {
    case '已认证':
      return 'green';
    case '未认证':
      return 'red';
  }
}
</script>
<template>
  <div class="jobAndEmployerDetail">
    <div class="top">
      <a-page-header
          sub-title="面试消息列表"
          title="返回"
          @back="() => $router.go(-1)"
      />
    </div>
    <div class="main">
      <div class="job">
        <a-divider orientation="left" style="color:#4D7181; font-size: 20px;">面试-信息</a-divider>
        <a-descriptions :title="'面试类型 : &nbsp&nbsp '+formState.interviewType">
          <a-descriptions-item label="状态">{{ formState.interviewStatus }}</a-descriptions-item>
          <a-descriptions-item :span="2" label="链接">{{ formState.interviewLink }}</a-descriptions-item>
          <a-descriptions-item :span="3" label="面试时间">
            {{ formState.interviewStartTime }} ~~~~~~~~~ {{ formState.interviewEndTime }}
          </a-descriptions-item>
          <a-descriptions-item :span="3" label="补充信息">
            {{ formState.interviewRemarks }}
          </a-descriptions-item>
        </a-descriptions>
      </div>
      <div class="job">
        <a-divider orientation="left" style="color:#4D7181; font-size: 20px;">职位-信息</a-divider>
        <a-descriptions :title="'岗位名称 : &nbsp&nbsp '+formState.jobTitle">
          <a-descriptions-item label="类型">{{ formState.jobType }}</a-descriptions-item>
          <a-descriptions-item label="薪资">{{ formState.jobSalary }} / {{ formState.jobSalaryType }}
          </a-descriptions-item>
          <a-descriptions-item label="地点">{{ formState.jobLocation }}</a-descriptions-item>
          <a-descriptions-item :span="1" label="工作周期">
            {{ formState.jobStartDate }} -- {{ formState.jobEndDate }}
          </a-descriptions-item>
          <a-descriptions-item :span="2" label="工作时间">
            {{ formState.jobWorkingHours }}
          </a-descriptions-item>
          <a-descriptions-item :span="3" label="职位描述">
            {{ formState.jobDescription }}
          </a-descriptions-item>
          <a-descriptions-item :span="3" label="职位要求">
            {{ formState.jobRequirements }}
          </a-descriptions-item>
        </a-descriptions>
      </div>
      <div class="job">
        <a-divider orientation="left" style="color:#4D7181; font-size: 20px;">公司-信息</a-divider>
        <a-badge-ribbon :color="Color(formState.employerIsVerified)" :text="formState.employerIsVerified">
          <div style="display: flex;padding-top: 30px">
            <div>
              <a-descriptions :title="'公司名称 : &nbsp&nbsp '+formState.employerCompanyName">
                <a-descriptions-item label="公司行业">{{ formState.employerCompanyIndustry }}</a-descriptions-item>
                <a-descriptions-item :span="2" label="公司官网">
                  {{ formState.employerCompanyWebsite }}
                </a-descriptions-item>
                <a-descriptions-item :span="3" label="公司简介">
                  {{ formState.employerCompanyDescription }}
                </a-descriptions-item>

                <a-descriptions-item :span="3" label="公司地址">
                  {{ formState.employerCompanyAddress }}
                </a-descriptions-item>
              </a-descriptions>
            </div>
            <div>
              <a-avatar
                  :size="150"
                  :src="'http://localhost:8080/image/download?name=' + formState.userAvatarUrl"
              />
            </div>
          </div>

        </a-badge-ribbon>
      </div>
    </div>
  </div>
</template>

<style scoped>
.jobAndEmployerDetail {
  padding: 10px;
  height: 750px;
  width: 70%;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin: 10px;

  .main {
    width: 100%;
    flex-grow: 1;
    height: 90%;
    overflow: auto; /* 内容超出时自动显示滚动条 */

    .job {
      margin: 0 20px 20px;
      border-radius: 10px;
      padding: 10px 30px 30px;
      border: 1px solid #ccc;
      height: auto;
      overflow: auto; /* 或者使用 overflow: hidden; */
    }
  }


}


</style>
